<template>
 <div>
   <TopNavBar></TopNavBar>
    <!-- banner -->
    <div class="message-banner">
      <!-- 弹幕输入框 -->
      <div class="message-container">
        <h1 class="message-title">留言板</h1>
        <div class="animated fadeInUp message-input-wrapper">
          <input
            v-model="messageContent"
            @click="show = true"
            placeholder="说点什么吧" style="background: transparent;"
          />
          <button
            class="ml-3 animated bounceInLeft"
            @click="addToList"

          >
            发送
          </button>
        </div>
      </div>
      <!-- 弹幕列表 -->
      <div class="barrage-container">
        <vue-baberrage :barrageList="barrageList" :loop="true">
          <template v-slot:default="slotProps">
            <span class="barrage-items">
              <img
                :src=slotProps.item.user.avatar
                width="30"
                height="30"
                style="border-radius:50%"
              />
              <span class="ml-2">{{ slotProps.item.user.username }} :</span>
              <span class="ml-2">{{ slotProps.item.messageContent }}</span>
            </span>
          </template>
        </vue-baberrage>
      </div>
    </div>
  </div>
</template>

<script>
import TopNavBar from '../components/layout/TopNavBar'
export default{
  name:"message",
  // 注册组件
  components: {
    TopNavBar
  },
  mounted () {
    this.getUser()
    this.listMessage()
   },
  data () {
    return {
      user:{},
      avatar: '',
      username: '',
      show: false,
      messageContent: '',
      barrageList: []
    }
  },
  methods: {
    async addToList () {
      if (this.messageContent.trim() === '') {
        this.$message.info('留言不能为空')
        return false
      }
      if (this.messageContent.length >20) {
        this.$message.info('留言最多为二十个字符')
        return false
      }
      const avatar = this.avatar
        ? this.avatar
        : 'http://localhost:8001/img/user/avatar/touristjpg.jpg'
      const username = this.username
        ? this.username
        : '游客'
      const uid= this.user.uid
        ? this.user.uid
        : 1
      const message = {
        user:{
          username: username,
          avatar: avatar
        },
        messageContent: this.messageContent,
        time: Math.floor(Math.random() * 10 + 3),
      }
      this.messageContent = ''
      const { data: res } = await this.$http.post('/service-blog/message/add/'+uid, message)
      // const { data: res } = await this.$http.post('/extension/message/add', message)
      if (res.flag) {
        // 弹出提示信息
        if(res.flag2){
          this.$message.info('新增留言成功,留言中包含敏感词已屏蔽!')
        }else{
          this.$message.success('新增留言成功')
        }
        message.messageContent=res.messageContent
        this.barrageList.push(message)
      } else { // 执行失败
        this.$message.error('留言内容包含敏感词!')
      }
    },
    async listMessage () {
      this.$http.get("/service-blog/message/getMessageList").then(res => {
        if (res.data.flag) {
          // this.$message.success(res.message)
          this.barrageList = res.data.MessageList
          console.log(this.barrageList)
        } else {
          this.$message.error(res.message)
        }
      })
    },
    getUser () {
      if (JSON.parse(window.sessionStorage.getItem("user"))!=null) {
        this.user =JSON.parse(window.sessionStorage.getItem('user'))
        this.username = this.user.username
        this.avatar = this.user.avatar
      }
    }
  }
}
</script>
<!--https://w.wallhaven.cc/full/39/wallhaven-39k589.jpg-->
<style>
   .message-banner {
      position: absolute;
      /*top: -58px;*/
      left: 0;
      right: 0;
      height: 100vh;
      background: url(https://w.wallhaven.cc/full/83/wallhaven-83ekej.png) center center /
      cover no-repeat;
      background-color: #49b1f5;
      animation: header-effect 1s;
    }
    .message-title {
      color: #eee;
      animation: title-scale 1s;
    }
    .message-container {
      position: absolute;
      width: 360px;
      top: 35%;
      left: 0;
      right: 0;
      text-align: center;
      z-index: 5;
      margin: 0 auto;
      color: #fff;
    }
    .message-input-wrapper {
      display: flex;
      justify-content: center;
      height: 2.5rem;
      margin-top: 2rem;
    }
    .message-input-wrapper input {
      outline: none;
      width: 70%;
      border-radius: 20px;
      height: 100%;
      padding: 0 1.25rem;
      color: #eee;
      border: #fff 1px solid;
    }
    .message-input-wrapper input::-webkit-input-placeholder {
      color: #eeee;
    }
    .message-input-wrapper button {
      outline: none;
      border-radius: 20px;
      height: 100%;
      padding: 0 1rem;
      border: #fff 2px solid;
    }
    .barrage-container {
      position: absolute;
      top: 50px;
      left: 0;
      right: 0;
      bottom: 0;
      height: calc(100% - 50px);
      width: 100%;
    }
    .barrage-items {
      background: rgb(0, 0,0, 0.7);
      border-radius: 100px;
      color: #fff;
      padding: 5px 10px 5px 5px;
      align-items: center;
      display: flex;
    }
</style>
